<template>
    <div class="login" id="login">
        <a href="javascript:;" class="log-close"><i class="icons close" @click="close"></i></a>
        <div class="log-bg">
            <div class="log-cloud cloud1"></div>
            <div class="log-cloud cloud2"></div>
            <div class="log-cloud cloud3"></div>
            <div class="log-cloud cloud4"></div>

            <div class="log-logo">Welcome!</div>
            <div class="log-text">@liudachu</div>
        </div>
        <div class="log-email" style="padding:0 70px">
            <el-form :model="ruleForm" :rules="rules"  status-icon ref="ruleForm">
                <el-form-item  prop="username">
                    <el-input type="text" placeholder="账号或者Email" style="width: 100%;" v-model="ruleForm.username"></el-input>
                </el-form-item>
                <el-form-item  prop="password">
                    <el-input type="password" placeholder="密码"  style="width: 100%" v-model="ruleForm.password"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button  @click="submitForm('ruleForm')" class="log-btn">登录</el-button>
                </el-form-item>
            </el-form>
        </div>
        <Loading v-if="isLoging" marginTop="-30%"></Loading>
    </div>
</template>

<script>
    import Loading from './Loading.vue'
    export default {
        name: 'Login',
        data(){
            return {
                isLoging: false,
                account: '',
                password: '',
                ruleForm: {
                    username: 'chif',
                    password: '123',
                },
                rules: {
                    username: [
                        { required: true, message: '请输入用户名', trigger: 'blur' },
                        { min: 3, max: 15, message: '长度在 3 到 15 个字符', trigger: 'blur' }
                    ],
                    password: [
                        { required: true, message: '请输入密码', trigger: 'blur' }
                    ],
                }
            }
        },
        components:{
            Loading
        },
        methods:{
            //关闭逻辑
            close() {
                // 隐藏div
                document.getElementById("login").hidden = true;
            },
            //登录逻辑
            submitForm(formName) {
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        this.toLogin();
                    } else {
                        console.log('error submit!!');
                        return false;
                    }
                });
            },
            //登录请求
            toLogin(){

                //设置在登录状态
                this.isLoging = true;

                let param = new URLSearchParams();
                param.append('username', this.ruleForm.username);
                param.append('password', this.ruleForm.password);

                // alert('submit!'+this.ruleForm.username);
                let _this=this;
                this.axios.post('/user/login',param).then(res=>{
                    //验证通过
                    //把数据共享出去
                    _this.$store.commit("SET_USERINFO",res.data.userInfo);
                    //获取Vuex中store的数据
                    /*console.log(_this.$store.getters.getUserInfo+"成功获取Vuex中store的数据");*/

                    //跳转页面
                    _this.$router.push("/");
                });

                //演示用
                // setTimeout(()=>{
                //     //登录状态15天后过期
                //     let expireDays = 1000 * 60 * 60 * 24 * 15;
                //     this.setCookie('session','blablablablabla...', expireDays);
                //     this.isLoging = false;
                //     //登录成功后
                //     this.$router.push('/');
                // },2000)
            }
        }
    }
</script>

<style scoped>
    .login{
        position: fixed;
        overflow: hidden;
        left: 50%; margin-left: 50px;
        top:60%;
        margin-top: -350px; width: 490px; min-height: 555px; z-index: 10; right: 140px; background: #fff;-webkit-border-radius: 5px;
        -moz-border-radius: 5px;
        -ms-border-radius: 5px;
        -o-border-radius: 5px;
        border-radius: 5px; -webkit-box-shadow:  0px 3px 16px -5px #070707; box-shadow:  0px 3px 16px -5px #070707}
    .log-close{display: block; position: absolute; top:12px; right: 12px; opacity: 1;}
    .log-close:hover .icons{transform: rotate(180deg);}
    .log-close .icons{opacity: 1; transition: all .3s}
    .log-cloud{background-image: url(../assets/login-cloud.png); width: 63px ;height: 40px; position: absolute; z-index: 1}
    .login .cloud1{top:21px; left: -30px; transform: scale(.6); animation: cloud1 20s linear infinite;}
    .login .cloud2{top:87px; right: 20px; animation: cloud2 19s linear infinite;}
    .login .cloud3{top:160px; left: 5px;transform: scale(.8);animation: cloud3 21s linear infinite;}
    .login .cloud4{top:150px; left: -40px;transform: scale(.4);animation: cloud4 19s linear infinite;}
    .log-bg{background: url(../assets/login-bg.jpg); width: 100%; height: 312px; overflow: hidden;}
    .log-logo{height: 80px; margin: 120px auto 25px; text-align: center; color: #1fcab3; font-weight: 700; font-size: 40px;}
    .log-text{color: #57d4c3;font-size: 13px;text-align: center;margin: 0 auto;
    }
    .log-logo,.log-text{z-index: 2}
    .icons{background:url(../assets/icons.png) no-repeat; display: inline-block;}
    .close{height:16px;width:16px;background-position:-13px 0;}
    .log-btn{width:353px; display: block; text-align: left; line-height: 10px; height:50px; color:#fff; font-size:16px;-webkit-border-radius: 5px; background-color: #3B5999;
        -moz-border-radius: 5px;
        -ms-border-radius: 5px;
        -o-border-radius: 5px;
        border-radius: 5px;
        position: relative;}
    .log-btn:hover,.log-btn:focus{color: #fff; opacity: .8;}

    .log-email{ margin-top: 20px;}
    .log-email .log-btn{background-color: #50E3CE;text-align: center;}
    .log-btn .icons{margin-left: 30px; vertical-align: middle;}


    @-webkit-keyframes cloud1 {
        0%{left: 200px}
        100%{left:-130px;}
    }
    @keyframes cloud1{
        0%{left: 200px}
        100%{left:-130px;}
    }

    @-webkit-keyframes cloud2 {
        0%{left:500px;}
        100%{left:-90px;}
    }
    @keyframes cloud2{
        0%{left:500px;}
        100%{left:-90px;}
    }

    @-webkit-keyframes cloud3 {
        0%{left:620px;}
        100%{left:-70px;}
    }
    @keyframes cloud3{
        0%{left:620px;}
        100%{left:-70px;}
    }@-webkit-keyframes cloud4 {
         0%{left:100px;}
         100%{left:-70px;}
     }
    @keyframes cloud4{
        0%{left:100px;}
        100%{left:-70px;}
    }

</style>
